<template>
  <div class="content" v-loading="loading">
    <div class="header">
      <div>
        <el-button v-if="hasBtn('30301')" type="primary" size="mini" @click="handleExport">导出数据</el-button>
      </div>
      <!-- <FormSearch
        ref="formSearch"
        :forms="searchForm"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      /> -->
      <el-form
      ref="from"
      :model="query"
      :inline="true"
    >
    <el-form-item label="" >
      <el-date-picker

          v-model="rongDate"
          size="mini"
          clearable
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :type="'datetimerange'"
          :format="'yyyy-MM-dd HH:mm:ss'"
          :value-format="'yyyy-MM-dd HH:mm:ss'"
        />
    </el-form-item>
      <el-form-item label="" >
        <el-select
         
          v-model="query.commissionStatus"
          size="mini"
          clearable
          placeholder="选择收益类型"
        >
          <!-- <el-option  label="请选择" :value="0" /> -->
          <el-option  label="未收益" :value="2" />
          <el-option  label="已收益" :value="3" />
          <el-option  label="已失效" :value="4" />
        </el-select>
      </el-form-item>

      <el-form-item label="" >
        <el-select
         
          v-model="query.orderStatus"
          size="mini"
          clearable
          placeholder="请选择订单状态"
        >
          <el-option  label="待支付" :value="1" />
          <el-option  label="已支付待核销" :value="5" />
          <el-option  label="已核销（已完成）" :value="10" />
          <el-option  label="已取消（订单未支付）" :value="15" />
          <el-option  label="已失效（关闭）" :value="20" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="" ><el-input  v-model="query.mobile" size="mini" clearable placeholder="请输入用户账号" /></el-form-item> -->
      <el-form-item label="" ><el-input  v-model="query.orderNo" size="mini" clearable placeholder="请输入订单编号" /></el-form-item>
      <el-form-item label="" ><el-input  v-model="query.serviceMobile" size="mini" clearable placeholder="请输入推广者" /></el-form-item>
      
      
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
    <el-table
      class="table-box"
      :data="tableData"
      style="width:100%;"
      :max-height="screenHight"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="订单ID" prop="orderNo" width="150" />
      <!-- <el-table-column label="商品ID" prop="products.id" /> -->
      <el-table-column label="购买用户" prop="buyName" width="200">
        <template slot-scope="scope">
          {{ scope.row.buyName }}({{scope.row.buyMobile || '无' }})
        </template>
      </el-table-column>
      <el-table-column label="兑换红包" prop="redpacket" width="200" />
      <el-table-column label="付款金额">
        <template slot-scope="scope">
          ¥{{ scope.row.payAmount }}
        </template>
      </el-table-column>
      <el-table-column label="预计收益" prop="actualCommission">
        <template slot-scope="scope">
          ¥{{ scope.row.actualCommission }}
        </template>
      </el-table-column>
      <el-table-column label="结算收益" prop="commission">
        <template slot-scope="scope">
          ¥{{ scope.row.commission }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="创建时间" prop="created_at" width="200" />
      <el-table-column label="结算时间" prop="created_at" width="200" /> -->
      <el-table-column label="创建时间">
        <template slot-scope="scope">
         <span> {{parseTime(scope.row.createdAt)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="完成时间">
        <template slot-scope="scope">
         <span> {{parseTime(scope.row.settleAt)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template slot-scope="scope">
          <p>{{scope.row.orderStatusText}}</p>
          <!-- <p v-if="scope.row.order_status == 10">已完成</p>
          <p v-if="scope.row.order_status == 20">已关闭</p> -->
        </template>
      </el-table-column>
      <el-table-column label="结算状态">
        <template slot-scope="scope">
          <p v-if="!scope.row.statusText">未结算</p>
          <p v-else>{{scope.row.statusText}}</p>
          <!-- <p v-if="Number(scope.row.money_record.status) === 1">已收益</p>
          <p v-if="Number(scope.row.money_record.status) === 2">已失效</p>
          <p v-if="Number(scope.row.money_record.status) === 3">冻结中</p> -->
        </template>
      </el-table-column>
      <el-table-column label="推广者" prop="parentName" width="200" />
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <span class="text">
          已结算收益：￥{{ settledMoney }}, 未结算预估收益: ￥{{ unSettledMoney}}
        </span>
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          :page-sizes="[20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
import { getExchangeOrders, getIncomesStatistic } from '@/api/myProfit'
import FormSearch from '@/components/FormSearch'
import { API_BASE_URL } from '@/config'
export default {
  components: {
    // FormSearch
  },
  data() {
    const mobile = this.$route.params.mobile || ''
    return {
      navList: [
        {
          title: '本月有效订单数',
          num: 0,
          money: false
        },
        {
          title: '本月交易金额',
          num: 0,
          money: true
        },
        {
          title: '本月预估佣金',
          num: 0,
          money: true
        },
        {
          title: '上月已收益佣金',
          num: 0,
          money: true
        }
      ],
      form: {},
      rongDate:[],
      query:{
        pageNum:1,
        pageSize:20,
        // keyword:'',
        partnerId:sessionStorage.getItem('partnerId'),
        mobile:this.$route.query.mobile?this.$route.query.mobile:'',
        serviceMobile:'',
        orderNo:'',
        beginTime:'',
        endTime:'',
        orderStatus:undefined,
        commissionStatus:undefined
        // sellerId:0,
        // shopTypeId:0,
        // shopStatus:0,
        // shopName:'',
        // search:'',

      },
      searchForm: {
        form: [
          {
            type: 'datePicker',
            rangeType: 'datetimerange',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            key: 'createTime',
            label: '订单时间:'
          },
          {
            type: 'select',
            key: 'income_status',
            placeholder: '请选择收益状态',
            options: [
              {
                label: '待收益',
                value: '0'
              },
              {
                label: '已收益',
                value: '1'
              },
              {
                label: '已失效',
                value: '2'
              },
              {
                label: '冻结中',
                value: '3'
              }
            ]
          },
          {
            type: 'select',
            key: 'order_status',
            placeholder: '请选择订单状态',
            options: [
              {
                label: '待收货',
                value: '5'
              },
              {
                label: '已完成',
                value: '10'
              },
              {
                label: '已关闭',
                value: '20'
              }
            ]
          },
          {
            type: 'input',
            key: 'order_no',
            placeholder: '请输入订单编号'
          },
          {
            type: 'input',
            key: 'mobile',
            placeholder: '请输入用户账号',
            default: mobile
          },
          {
            type: 'input',
            key: 'agentname',
            placeholder: '请输入推广者'
          }
        ]
      },
      settledMoney: 0, // 未结算收益
      unSettledMoney: 0, // 已结算收益
      total: 0,
      page: 1,
      size: 20,
      tableData: [],
      loading: false,
      
    }
  },
  created() {
    const mobile = this.$route.params.mobile || ''
    this.form.mobile = mobile
    this.getData()
    // this.getStatistic()
  },
  methods: {
    getStatistic(arg) {
      const params = {
        type: 3,
        ...arg
      }
      if (params.income_status) {
        params.status = params.income_status
        delete params.income_status
      }
      if (params.mobile) {
        params.order_user_mobile = params.mobile
        delete params.mobile
      }
      getIncomesStatistic(params).then(res => {
        if(res.code === 10000) {
          this.unsettle_revenue = res.data.unsettle_revenue
          this.settle_revenue = res.data.settle_revenue
        }
      })
    },
    handleSearch(formValue) {
      // this.page = 1
      if (this.rongDate.length) {
        this.query.beginTime = this.rongDate[0]+''
        this.query.endTime = this.rongDate[1]+''
        // delete formValue.createTime
      }
      // if (formValue.createTime) {
      //   formValue.created_at_GT = formValue.createTime[0]
      //   formValue.created_at_LT = formValue.createTime[1]
      //   delete formValue.createTime
      // }
      // this.form = formValue
      // const params = {
      //   page: 1,
      //   ...formValue
      // }
      // const statisticParams = {
      //   ...formValue
      // }
      // if (formValue.created_at_GT) {
      //   statisticParams.start_time = formValue.created_at_GT
      //   statisticParams.end_time = formValue.created_at_LT
      // }
      // delete statisticParams.created_at_GT
      // delete statisticParams.created_at_LT
      // if (formValue.mobile && formValue.mobile !== '') {
      //   statisticParams.order_user_mobile = formValue.mobile
      // }
      // if (formValue.status && formValue.status !== '') {
      //   statisticParams.order_status = formValue.status
      //   delete statisticParams.status
      // }
      // if (formValue.income_status && formValue.income_status !== '') {
      //   statisticParams.status = formValue.income_status
      //   delete statisticParams.income_status
      // }
      this.getData()
      // this.getStatistic(statisticParams)
    },
    handleReset() {
      // this.form = {}
      this.query.pageNum = 1
      // const params = {
      //   page: 1
      // }
      this.getData()
      this.getStatistic({})
    },
    async getData(arg) {
      // const params = {
      //   ...arg,
      //   order_type: 35
      // }
      let listRes = await getExchangeOrders(this.query)
      if (listRes.code === 200) {
        // if (params.is_export == 1) {
        //   window.open(
        //     `${API_BASE_URL}/admin/download/zip/${listRes.data[1].download_token}`
        //   )
        // } else {
          this.tableData = listRes.data.list || []
          this.total = listRes.data.total
          this.unSettledMoney = listRes.data.unSettledMoney
          this.settledMoney = listRes.data.settledMoney

        // }
      } else {
        this.$message.error(listRes.message)
      }
    },
    handleExport() {
      const params = {
        ...this.form,
        is_export: 1
      }
      this.getData(params)
    },
    pageChange(page) {
      this.query.pageNum = page
      // const params = {
      //   page: this.page,
      //   ...this.form
      // }
      this.getData(params)
    },
    tc() {
      return 'text-align:center; color:#333333; font-size:12px;'
    },
    tccolor() {
      return 'text-align:center;background-color:#f5f5f5; font-size:14px;'
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  background-color: #fff;
  height: 100%;
  padding: 10px 20px 0 ;
  box-sizing: border-box;
  .header {
    display: flex;
    justify-content: space-between;

    margin-bottom: 20px;
  }
  .table-box {
    height: calc(100vh - 220px);
  }
  .pagination {
    display: flex;
    width: 97%;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 99;
    .text {
      color: #666
    }
  }
}
</style>
